<template>
  <div class="formInfo">
    <template v-for="(item, index) in fieldList">
      <div class="formItem" :key="index">
        <label class="left"> {{ item.field_name }}: </label>
        <div class="right">
          <div class="value">{{ item.field_value }}</div>
          <div class="desc">{{ item.description }}</div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    fieldList: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  created() {
    //console.log("fieldList", this.fieldList);
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.formInfo {
  display: flex;
  flex-wrap: wrap;
  .formItem {
    width: 50%;
    display: flex;
    margin: 10px 0;
    .left {
      width: 120px;
      text-align: right;
      margin-right: 10px;
    }
    .right {
      flex: 1;
      .desc {
        min-height: 20px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        line-height: 1.5715;
        transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
        padding-top: 0;
      }
    }
  }
}
</style>
